<template>
  <div class="flex fixed  !-ml-[214px] w-screen min-w-[1000px]">
    <div class="w-full p-2 pr-2">
      <div class="w-full border-2 bg-black
    border-gray-300 flex items-center justify-center h-[calc(100vh-110px)]"
           id="wrapper">
        <div class="flex flex-shrink-0" :class="videoDisplayClass" id="videoWrapper" @dblclick="handleDbclick">
          <videoPlayer v-show="isPlaying" src="" ref="videoPlayer"
                       :class="activeRatio === 3 ? `h-[${originHeight}px] w-[${originWidth}px]` : 'h-[calc(100vh-110px)]'"
                       class="w-full object-fill border-2 border-red-600"
                       :video="video"
          ></videoPlayer>
        </div>

      </div>
      <div class="h-[35px] p-1 pt-2 flex gap-4 border-b-[1px] border-x-[1px] border-gray-300">
        <span title="4:3" @click="changeRatio(1)" class="scale-150 cursor-pointer f1 p-2 border-[1px] border-gray-300 rounded-sm size-[32px]"></span>
        <span title="16:9" @click="changeRatio(2)"  class="scale-150 cursor-pointer f2 p-2 border-[1px] border-gray-300 rounded-sm size-[32px]"></span>
        <span title="原始尺寸" @click="changeRatio(3)" class="scale-150 cursor-pointer f3 p-2 border-[1px] border-gray-300 rounded-sm size-[32px]"></span>
        <span title="自适应" @click="changeRatio(4)" class="scale-150 cursor-pointer f4 p-2 border-[1px] border-gray-300 rounded-sm size-[32px]"></span>
        <span v-if="isPlaying" title="停止预览" @click="pause()"  class="f7 inline-block !ml-auto scale-150 cursor-pointer p-2 rounded-sm size-[32px]"></span>
        <span v-else title="开始预览" @click="start()"  class="f8 inline-block !ml-auto scale-125 cursor-pointer p-2 rounded-sm size-[32px]"></span>
        <span title="抓图" @click="getPic()"  class="f5 inline-block !mr-2 scale-150 cursor-pointer p-2 rounded-sm size-[32px]"></span>
        <span title="录像" id="lx" @click="getVideo()"  class="f6 inline-block scale-150 cursor-pointer p-2 rounded-sm size-[32px]"></span>


      </div>
    </div>
    <div id="sidebar" class="!relative !right-[10px] !z-10 flex-shrink-0"
         style="position: absolute; padding: 0px; margin: 0px;
       font-size: 1px; text-align: left; overflow: hidden; z-index: 2;
        right: 220px; height: calc(100vh - 90px); width: 10px;  cursor:
         default;">
      <div id="ui-layout-toggler-east-open" @click="toggleSidebar" class="ui-layout-toggler-east-open"
           title="关闭"
           style="">

      </div>
    </div>
    <div class="grow border-0 border-gray-300
  right-0 w-[220px] min-w-[220px]  max-h-[calc(100vh-58px)] min-h-[400px]" :class="isHidden ? 'hidden' : ''">

      <div class="flex flex-col p-2 h-full">
        <div class="flex flex-col items-center justify-center border-b-2 border-[#d8151d] pb-3 mt-1">
          <div class="head"></div>
          <div class="text-[#d8151d] font-bold">云台</div>
        </div>

        <div class="flex gap-4 mt-4">
          <div class="grid grid-cols-3 grid-rows-3 gap-1">
         <span class="a a1 p-2 border-[1px] border-gray-300 rounded-sm size-[32px]"
               @mousedown="startMove('UpLeft')" title="左上"
               @mouseup="stopMove"></span>
            <span class="a a2 p-2 border-[1px] border-gray-300 rounded-sm size-[32px]"
                  @mousedown="startMove('Up')" title="上"
                  @mouseup="stopMove"></span>
            <span class="a a3 p-2 border-[1px] border-gray-300 rounded-sm size-[32px]"
                  @mousedown="startMove('UpRight')" title="右上"
                  @mouseup="stopMove"></span>

            <!-- Row 2 -->
            <span class="a a4 p-2 border-[1px] border-gray-300 rounded-sm size-[32px]"
                  @mousedown="startMove('Left')" title="左"
                  @mouseup="stopMove"></span>
            <span title="自动" class="a a5 p-2 border-[1px] border-gray-300 rounded-sm size-[32px]"></span> <!-- No action -->
            <span class="a a6 p-2 border-[1px] border-gray-300 rounded-sm size-[32px]"
                  @mousedown="startMove('Right')" title="右"
                  @mouseup="stopMove"></span>

            <!-- Row 3 -->
            <span class="a a7 p-2 border-[1px] border-gray-300 rounded-sm size-[32px]"
                  @mousedown="startMove('DownLeft')" title="左下"
                  @mouseup="stopMove"></span>
            <span class="a a8 p-2 border-[1px] border-gray-300 rounded-sm size-[32px]"
                  @mousedown="startMove('Down')" title="下"
                  @mouseup="stopMove"></span>
            <span class="a a9 p-2 border-[1px] border-gray-300 rounded-sm size-[32px]"
                  @mousedown="startMove('DownRight')" title="右下"
                  @mouseup="stopMove"></span></div>
          <div class="grid grid-cols-2 grid-rows-3 gap-1">
          <span   @mousedown="startZoom('In')"
                  @mouseup="startZoom('Stop')" title="调焦 -"
                  class="a b b1 p-2 border-[1px] border-gray-300 rounded-sm size-[37px]"></span>
            <span  @mousedown="startZoom('Out')" title="调焦 +"
                   @mouseup="startZoom('Stop')" class="a b2 p-2 border-[1px] border-gray-300 rounded-sm size-[37px]"></span>

            <span   @mousedown="startFocus('Near')" title="聚焦 -"
                    @mouseup="startFocus('Stop')" class="a b3 p-2 border-[1px] border-gray-300 rounded-sm size-[37px]"></span>

            <span   @mousedown="startFocus('Far')" title="聚焦 +"
                    @mouseup="startFocus('Stop')" class="a b4 p-2 border-[1px] border-gray-300 rounded-sm size-[37px]"></span>
            <span title="光圈 -" class="a b5 p-2 border-[1px] border-gray-300 rounded-sm size-[37px]"></span>
            <span title="光圈 +" class="a b6 p-2 border-[1px] border-gray-300 rounded-sm size-[37px]"></span>
          </div>
        </div>
        <div class="flex items-center">
          <el-slider
            v-model="speed" class="mx-2 w-4/5" :min="1" :max="9" title="云台速度"
            :step="1">
          </el-slider>
          <span>{{  speed }}</span>
        </div>
        <div class="grid grid-cols-5 grid-rows-1 gap-1">
<!--          <svg-icon icon-class="云台" title="云台" class="a c !p-[5px] border-[1px] border-gray-300 rounded-sm !w-[36px] !h-[30px]"-->
<!--                    :class="capabilities.ptzSupport ? 'hover:!text-[#d8151d]' : '!text-[#c9c9c9]'"></svg-icon>-->
          <svg-icon title="灯光" class="a c !p-[5px] border-[1px] border-gray-300 rounded-sm !w-[36px] !h-[30px]"
                    :class="capabilities.lightSupport ? 'hover:!text-[#d8151d]' : '!text-[#c9c9c9]'" icon-class="灯光"></svg-icon>

          <svg-icon title="雨刷" class="a c !p-[5px] border-[1px] border-gray-300 rounded-sm !w-[36px] !h-[30px]"
                    :class="capabilities.wiperSupport ? 'hover:!text-[#d8151d]' : '!text-[#c9c9c9]'" icon-class="雨刷"></svg-icon>

          <svg-icon title="聚焦" class="a c !p-[5px] border-[1px] border-gray-300 rounded-sm !w-[36px] !h-[30px]"
                    :class="capabilities.focusSupport ? 'hover:!text-[#d8151d]' : '!text-[#c9c9c9]'" icon-class="聚焦2" @click="startFocus('Auto')"></svg-icon>
<!--          <svg-icon icon-class="变倍+" title="变倍" class=" a c !p-[5px] border-[1px] border-gray-300 rounded-sm !w-[36px] !h-[30px]"-->
<!--                    :class="capabilities.zoomSupport ? 'hover:!text-[#d8151d]' : '!text-[#c9c9c9]'"></svg-icon>-->
<!--          <svg-icon icon-class="光圈" title="光圈" class="a c !p-[5px] border-[1px] border-gray-300 rounded-sm !w-[36px] !h-[30px]"-->
<!--                    :class="capabilities.irisSupport ? 'hover:!text-[#d8151d]' : '!text-[#c9c9c9]'"></svg-icon>-->
          <svg-icon icon-class="测温" title="测温" class="a c !p-[5px] border-[1px] border-gray-300 rounded-sm !w-[36px] !h-[30px]"
                    :class="{
            '!text-[#c9c9c9]': !capabilities.measureTempSupport,
            '!text-[#d8151d]': capabilities.measureTempSupport && measureState === 1,
            'hover:!text-[#d8151d]': capabilities.measureTempSupport && measureState !== 1
          }"
          @click="measureStateSwitch"></svg-icon>




<!--          <span title="灯光" class="c c1 p-2 border-[1px] border-gray-300 rounded-sm size-[37px]"></span>-->
<!--          <span title="雨刷" class="a c c2 p-2 border-[1px] border-gray-300 rounded-sm size-[37px]"></span>-->
<!--          <span title="辅助聚焦" class="a c c3 p-2 border-[1px] border-gray-300 rounded-sm size-[37px]"></span>-->
<!--          <span title="镜头初始化" class=" c c4 p-2 border-[1px] border-gray-300 rounded-sm size-[37px]"></span>-->
          <!--        <span title="开启手动跟随" class=" c c5 p-2 border-[1px] border-gray-300 rounded-sm size-[37px]"></span>-->
          <!--        <span title="开启3D定位" class=" c c6 p-2 border-[1px] border-gray-300 rounded-sm size-[37px]"></span>-->
<!--          <span title="点击测温" class=" c c7 p-2 border-[1px] border-gray-300 rounded-sm size-[37px]"></span>-->
        </div>

        <div class="mt-4 flex flex-col gap-1 flex-1 min-h-0  ">
          <div class="flex">
            <div class="dd">
              <i class="d"></i>
            </div>
            <!-- 原来的添加按钮已移除 -->
          </div>

          <div class="flex flex-col border-[1px] border-gray-300 rounded-sm
overflow-y-auto flex-1 min-h-0 z-10">
            <div v-for="(item, i) in presets" :key="item.id"
                 class="group relative flex py-2 text-[12px] shrink-0 gap-2 items-center"
                 :class="{
         'bg-[#eeeeee]': selected === i && item.status,
         'text-gray-400': !item.status,
         'hover:bg-gray-100': item.status,
         'cursor-pointer': item.status
       }">
<!--              <span class="pl-2 w-8 text-center shrink-0">{{ item.id }}</span>-->
              <div class="flex-1 ml-2 grow ms overflow-ellipsis">
                <!-- 显示模式 -->
                <span v-if="editingIndex !== i" @dblclick="item.status && startEdit(i, item)">
        {{ item.name }}
      </span>
                <!-- 编辑模式 -->
                <input
                  v-else
                  :maxlength="16"
                  type="text"
                  v-model="item.name"
                  class="w-full !text-[10px] max-w-[80px] py-0 border border-gray-400 rounded focus:outline-none focus:border-blue-500"
                  ref="editInput"
                  @blur="finishEdit(item)"
                  @keyup.enter="finishEdit(item)"
                />
              </div>

              <!-- 悬浮时显示的操作按钮 -->
              <div class="absolute right-2 top-1/2 -translate-y-1/2 invisible group-hover:visible flex gap-1 p-1 rounded">
                <!-- 未设置状态下的按钮 -->
                <div v-if="!item.status" class="flex">
                  <el-button
                    v-if="capabilities.ptzSupport"
                    title="设置"
                    class="!p-0 !size-[24px] el-icon-setting !border-none !bg-transparent !mx-0"
                    @click.stop="setOrUpdatePreset(item)"
                  ></el-button>
                </div>

                <!-- 已设置状态下的按钮 -->
                <div v-else class="flex">
                  <el-button
                    title="调用"
                    class="!p-0 !size-[24px] el-icon-video-play !border-0 !bg-transparent !mx-0"
                    @click.stop="handleClick(item, i)"
                  ></el-button>
                  <el-button
                    title="设置"
                    class="!p-0 !size-[24px] el-icon-setting !border-none !bg-transparent !mx-0"
                    @click.stop="setOrUpdatePreset(item)"
                  ></el-button>
                  <el-button
                    title="删除"
                    class="!p-0 !size-[24px] el-icon-delete !border-none !bg-transparent !mx-0"
                    @click.stop="removePreset(item, i)"
                  ></el-button>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import {
  controlfocus,
  controlstop,
  direct,
  getMeasureSwitchState,
  getvideoparam,
  postMeasureSwitchState,
  querypreset,
  zoom
} from "@/api/api";
import {getCapabilities, getQueryPreset, postPreset} from "@/api/api2";
import videoPlayer from "@/views/mini/videoplayer.vue"
import screenfull from 'screenfull'

export default {
  name: "preview",
  components: {
    videoPlayer
  },
  data() {
    return {
      measureState: 0,
      isPlaying: true,
      capabilities: {
        "ptzSupport": 1,
        "focusSupport": 1,
        "zoomSupport": 0,
        "irisSupport": 0,
        "lightSupport": 0,
        "wiperSupport": 0,
        measureTempSupport: 1 ,
      },
      video: {
        url: "ws://192.168.2.168:8000",
        index: 0,
        deviceId: 0,
        sessionId: 0,
        name: '',
        itemCode: '',
        fps: 30,
        uid:'0'
      },
      speed: 5,
      activeRatio: 4,
      selected: -1,
      editingIndex: null, // null 表示没有行在编辑
      originalName: '',
      isHidden: false,
      isLx: false,
      width: window.innerWidth,
      height: window.innerHeight,
      videoWidth1: 0,
      videoHeight1: 0,
      videoWidth2: 0,
      videoHeight2: 0,
      originWidth: 384,
      originHeight: 288,
      // Initialize 255 presets with a default 'disabled' state
      presets: Array.from({ length: 255 }, (_, i) => ({
        id: i + 1,
        name: `预置点 ${i + 1}`,
        status: false, // false: inactive/unset, true: active/set
      })),
      isFull: false,
    }
  },

  mounted() {
    getMeasureSwitchState().then(res => {
      this.measureState = res.data.state
    })
    getCapabilities().then(res => {
      if (res.code === 0 && res.data) {
        this.capabilities = res.data;
      }
    });
    document.getElementById("name").innerText = '预  览';

    // Fetch active presets and merge them into the default list
    getQueryPreset().then(res =>{
      if (res.code === 0 && res.data && res.data.presets){
        res.data.presets.forEach(apiPreset => {
          const localPreset = this.presets.find(p => p.id === apiPreset.id);
          if (localPreset) {
            localPreset.name = apiPreset.name;
            localPreset.status = true; // Mark as active
          }
        });
      }
    })

    getvideoparam().then(res => {
      this.originWidth = res.data.width
      this.originHeight = res.data.height;
    })
    window.addEventListener('resize', this.handleResize);
    document.addEventListener('fullscreenchange', this.onFullScreenChange);

    let h = document.getElementById('wrapper').getBoundingClientRect().height;
    let w = document.getElementById('wrapper').getBoundingClientRect().width;
    this.videoWidth1 = (window.innerHeight - 110)/3*4;
    this.videoWidth2 = (window.innerHeight - 110)/9*16;
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  computed: {
    videoDisplayClass() {
      switch (this.activeRatio) {
        case 1: // 4:3 -
          return `w-[${this.videoWidth1}px]`;
        case 2: // 16:9 -
          return `w-[${this.videoWidth2}px]`;
        case 4: // Adaptive -
          return 'w-full';
        case 3: // Original -
          return '';
        default:
          return 'w-full'; // Default behavior
      }
    },
  },
  methods: {
    measureStateSwitch() {
      if (this.capabilities.measureTempSupport) {
        let newState = this.measureState == 0 ? 1 : 0;
        postMeasureSwitchState({
          state: newState
        }).then(res => {
          if (res.code == 0) {
            this.measureState = newState
          }
        })
      }
    },
    handleClick(item, index) {
      if (!item.status) return;

      if (this.selected !== index) {
        if (this.editingIndex !== null) {
          this.finishEdit(this.presets[this.editingIndex]);
        }
        this.selected = index;
      }

      const form = {
        id: item.id,
        cmd: 'Call',
        name: item.name.trim()
      };

      postPreset(form).then(res => {
        if (res.code !== 0) {
          this.$message.error('调用预置点失败');
        }
      })
    },
    startEdit(index, item) {
      this.originalName = item.name;
      this.editingIndex = index;
      this.$nextTick(() => {
        if (this.$refs.editInput) {
          this.$refs.editInput.focus();
        }
      });
    },
    finishEdit(item) {
      if (this.editingIndex === null || !item || item.name.trim() === this.originalName) {
        this.editingIndex = null;
        return;
      }

      const form = {
        id: item.id,
        cmd: 'Set',
        name: item.name.trim()
      };

      postPreset(form).then(res => {
        if (res.code !== 0) {
          this.$message.error('更新失败，已恢复原名称');
          // Revert name on failure
          const presetToRevert = this.presets.find(p => p.id === item.id);
          if (presetToRevert) {
            presetToRevert.name = this.originalName;
          }
        }
      }).catch(() => {
        this.$message.error('更新失败，已恢复原名称');
        const presetToRevert = this.presets.find(p => p.id === item.id);
        if (presetToRevert) {
          presetToRevert.name = this.originalName;
        }
      }).finally(() => {
        this.editingIndex = null;
        this.originalName = '';
      });
    },
    setOrUpdatePreset(item) {
      // 检查当前是否处于对此项的编辑模式
      const currentIndex = this.presets.findIndex(p => p.id === item.id);
      if (this.editingIndex === currentIndex) {
        // 如果是，则调用 finishEdit 来处理名称保存逻辑
        this.finishEdit(item);
      }

      const isUpdating = item.status; // 检查是新增还是更新
      const form = {
        id: item.id,
        cmd: 'Set',
        name: item.name.trim(), // v-model 保证了 item.name 是最新的
      };

      postPreset(form).then(res => {
        if (res.code === 0) {
          item.status = true; // 激活预置点
          this.$message({
            message: isUpdating ? '更新预置点成功' : '设置预置点成功',
            type: 'success'
          });
        } else {
          this.$message.error(isUpdating ? '更新预置点失败' : '设置预置点失败');
        }
      });
    },

    // 2. 修改 removePreset 方法
    removePreset(item, index) { // 接收索引 index
      if (!item) return;

      const form = {
        id: item.id,
        cmd: 'Clear',
        name: item.name,
      }
      postPreset(form).then(res => {
        if (res.code === 0) {
          // 重置为未激活状态
          item.name = `预置点 ${item.id}`;
          item.status = false;

          // 如果删除的是当前选中的项，则取消选中
          if (this.selected === index) {
            this.selected = -1;
          }

          // 【BUG修复】如果删除的是正在编辑的项，则退出编辑模式
          if (this.editingIndex === index) {
            this.editingIndex = null;
            this.originalName = ''; // 清理原始名称
          }

          this.$message({
            message: '删除预置点成功',
            type: 'success'
          });
        } else {
          this.$message.error('删除预置点失败');
        }
      })
    },
    startMove(direction) {
      if (this.capabilities.ptzSupport == 1)
      direct({
        cmd: direction,
        speed: this.speed
      })
    },
    stopMove() {
      if (this.capabilities.ptzSupport == 1)
      controlstop()
    },
    startFocus(cmd) {
      controlfocus({cmd})

    },
    startZoom(cmd){
      if (this.capabilities.zoomSupport == 1)
      zoom({cmd})
    },
    handleResize() {
      this.width = window.innerWidth;
      this.height = window.innerHeight;
      let h = document.getElementById('wrapper').getBoundingClientRect().height;
      let w = document.getElementById('wrapper').getBoundingClientRect().width;
      this.videoWidth1 = h/3*4;
      this.videoWidth2 = h/9*16;
    },
    toggleSidebar() {
      this.isHidden = !this.isHidden;
      if (this.isHidden) {
        document.getElementById('sidebar').style.right = "0px"
        document.getElementById('ui-layout-toggler-east-open')
          .style.backgroundPosition = "-10px 50%"
      } else {
        document.getElementById('sidebar').style.right = "220px"
        document.getElementById('ui-layout-toggler-east-open')
          .style.backgroundPosition = "0px 50%"
      }
    },
    onFullScreenChange() {
      this.isFull = !!(document.fullscreenElement || document.webkitFullscreenElement);
      if (!this.isFull) {
        document.getElementById("A00").classList.add('h-[calc(100vh-110px)]')
      }
    },
    handleDbclick() {
      console.log("toggle")
      if (this.isFull) {
        this.isFull = !this.isFull
        document.exitFullscreen()
        document.getElementById("A00").classList.add('h-[calc(100vh-110px)]')
        document.getElementById("A00").classList.remove("h-[calc(100vh)]")
      } else {
        this.isFull = !this.isFull
        document.getElementById("videoWrapper").requestFullscreen()
        document.getElementById("videoWrapper").classList.add('justify-center')
        document.getElementById("videoWrapper").classList.add('items-center')
        document.getElementById("A00").classList.remove("h-[calc(100vh-110px)]")
        document.getElementById("A00").classList.add("h-[calc(100vh)]")
      }
    },
    changeRatio(ratio) {
      this.activeRatio = ratio;
    },
    getPic() {
      this.$refs.videoPlayer.handleScreenshot()
    },
    start() {
      this.isPlaying = true;
    },
    pause() {
      this.isPlaying = false;
    },
    getVideo() {
      if (this.isLx) {
        this.isLx = false
        document.getElementById("lx").classList.remove("f66")
        this.$refs.videoPlayer.videoShow()
      } else {
        this.isLx = true
        this.$refs.videoPlayer.videoShow()
        document.getElementById("lx").classList.add("f66")
      }
    },
  }
}
</script>


<style scoped>
.head {
  background-image: url("~@/assets/images/config.png");
  display: inline-block;
  width: 16px;
  height: 16px;
  background-position: -295px -83px;
}
.a1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  visibility: visible;
  cursor: pointer;
  padding: 0;
  -webkit-text-size-adjust: none;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 1px 1px;
  background: url("~@/assets/images/ptz.png") no-repeat 0 0;
}
.a2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  visibility: visible;
  cursor: pointer;
  padding: 0;
  -webkit-text-size-adjust: none;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 1px 1px;
  background: url("~@/assets/images/ptz.png") no-repeat -30px 0px;
}
.a3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  visibility: visible;
  cursor: pointer;
  padding: 0;
  -webkit-text-size-adjust: none;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 1px 1px;
  background: url("~@/assets/images/ptz.png") no-repeat -60px 0px;
}
.a4 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  visibility: visible;
  cursor: pointer;
  padding: 0;
  -webkit-text-size-adjust: none;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 1px 1px;
  background: url("~@/assets/images/ptz.png") no-repeat 0 -30px;
}
.a5 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  visibility: visible;
  cursor: pointer;
  padding: 0;
  -webkit-text-size-adjust: none;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 1px 1px;
  background: url("~@/assets/images/ptz.png") no-repeat -30px -30px;
}
.a6 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  visibility: visible;
  cursor: pointer;
  padding: 0;
  -webkit-text-size-adjust: none;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 1px 1px;
  background: url("~@/assets/images/ptz.png") no-repeat -60px -30px;
}
.a7 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  visibility: visible;
  cursor: pointer;
  padding: 0;
  -webkit-text-size-adjust: none;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 1px 1px;
  background: url("~@/assets/images/ptz.png") no-repeat 0px -60px;
}
.a8 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  visibility: visible;
  cursor: pointer;
  padding: 0;
  -webkit-text-size-adjust: none;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 1px 1px;
  background: url("~@/assets/images/ptz.png") no-repeat -30px -60px;
}
.a9 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  visibility: visible;
  cursor: pointer;
  padding: 0;
  -webkit-text-size-adjust: none;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 1px 1px;
  background: url("~@/assets/images/ptz.png") no-repeat -60px -60px;
}
.a {
  cursor: pointer;
}

.b1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  visibility: visible;
  text-align: right;
  cursor: pointer;
  padding: 0;
  -webkit-text-size-adjust: none;
  float: left;
  width: 36px;
  height: 30px;
  margin: 1px 0 1px 1px;
  background: url("~@/assets/images/ptz.png") no-repeat;
  background-position: -90px 0;
}
.b2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  visibility: visible;
  text-align: right;
  cursor: pointer;
  padding: 0;
  -webkit-text-size-adjust: none;
  float: left;
  width: 36px;
  height: 30px;
  margin: 1px 0 1px 1px;
  background: url("~@/assets/images/ptz.png") no-repeat;
  background-position: -126px 0;
}
.b3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  visibility: visible;
  text-align: right;
  cursor: pointer;
  padding: 0;
  -webkit-text-size-adjust: none;
  float: left;
  width: 36px;
  height: 30px;
  margin: 1px 0 1px 1px;
  background: url("~@/assets/images/ptz.png") no-repeat;
  background-position: -90px -30px;
}
.b4 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  visibility: visible;
  text-align: right;
  cursor: pointer;
  padding: 0;
  -webkit-text-size-adjust: none;
  float: left;
  width: 36px;
  height: 30px;
  margin: 1px 0 1px 1px;
  background: url("~@/assets/images/ptz.png") no-repeat;
  background-position: -126px -30px;
}
.b5 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  visibility: visible;
  text-align: right;
  cursor: pointer;
  padding: 0;
  -webkit-text-size-adjust: none;
  float: left;
  width: 36px;
  height: 30px;
  margin: 1px 0 1px 1px;
  background: url("~@/assets/images/ptz.png") no-repeat;
  background-position: -90px -62px;
}
.b6 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  visibility: visible;
  text-align: right;
  cursor: pointer;
  padding: 0;
  -webkit-text-size-adjust: none;
  float: left;
  width: 36px;
  height: 30px;
  margin: 1px 0 1px 1px;
  background: url("~@/assets/images/ptz.png") no-repeat;
  background-position: -127px -62px;
}
.c1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  visibility: visible;
  text-align: right;
  cursor: pointer;
  padding: 0;
  -webkit-text-size-adjust: none;
  float: left;
  width: 36px;
  height: 30px;
  margin: 1px 0 1px 1px;
  background: url("~@/assets/images/ptz.png") no-repeat -199px -90px;;
}
.c2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  visibility: visible;
  text-align: right;
  cursor: pointer;
  padding: 0;
  -webkit-text-size-adjust: none;
  float: left;
  width: 36px;
  height: 30px;
  margin: 1px 0 1px 1px;
  background: url("~@/assets/images/ptz.png") no-repeat;
  background-position: -162px -30px;
}
.c3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  visibility: visible;
  text-align: right;
  cursor: pointer;
  padding: 0;
  -webkit-text-size-adjust: none;
  float: left;
  width: 36px;
  height: 30px;
  margin: 1px 0 1px 1px;
  background: url("~@/assets/images/ptz.png") no-repeat;
  background-position: -199px 0px;
}
.c4 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  visibility: visible;
  text-align: right;
  cursor: pointer;
  padding: 0;
  -webkit-text-size-adjust: none;
  float: left;
  width: 36px;
  height: 30px;
  margin: 1px 0 1px 1px;
  background: url("~@/assets/images/ptz.png") no-repeat;
  background-position: -199px -240px;
}
.c5 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  visibility: visible;
  text-align: right;
  cursor: pointer;
  padding: 0;
  -webkit-text-size-adjust: none;
  float: left;
  width: 36px;
  height: 30px;
  margin: 1px 0 1px 1px;
  background: url("~@/assets/images/ptz.png") no-repeat;
  background-position: -236px -210px;
}
.c6 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  visibility: visible;
  text-align: right;
  cursor: pointer;
  padding: 0;
  -webkit-text-size-adjust: none;
  float: left;
  width: 36px;
  height: 30px;
  margin: 1px 0 1px 1px;
  background: url("~@/assets/images/ptz.png") no-repeat;
  background-position: -236px -240px;
}
.c7 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  visibility: visible;
  text-align: right;
  cursor: pointer;
  padding: 0;
  -webkit-text-size-adjust: none;
  float: left;
  width: 36px;
  height: 30px;
  margin: 1px 0 1px 1px;
  background: url("~@/assets/images/ptz.png") no-repeat;
  background-position: -297px -174px
}
.d {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  visibility: visible;
  font-weight: normal /*{fwDefault}*/;
  list-style: none;
  white-space: nowrap;
  margin: 0;
  -webkit-text-size-adjust: none;
  display: inline-block;
  width: 64px;
  background-image: url("~@/assets/images/ptz.png");
  color: #212121 /*{fcActive}*/;
  border-bottom: 0;
  margin-top: 0;
  float: left;
  padding: 0.5em 1em;
  text-decoration: none;
  outline: 0;
  height: 40px;
  cursor: text;
  background-position: -234px -72px;
}
.dd {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  visibility: visible;
  -webkit-text-size-adjust: none;
  border: 1px solid #BB2230 /*{borderColorActive}*/;
  background: #ffffff /*{bgColorActive}*/;
  font-weight: normal /*{fwDefault}*/;
  color: #212121 /*{fcActive}*/;
  list-style: none;
  position: relative;
  top: 0;
  padding: 0;
  white-space: nowrap;
  float: left;
  border-width: 1px;
  margin: 0;
  width: 61px;
  height: 24px;
  background-color: #BB2230;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  margin-bottom: -1px;
  padding-bottom: 1px;
}
.dd2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  visibility: visible;
  -webkit-text-size-adjust: none;
  border: 1px solid #BB2230 /*{borderColorActive}*/;
  background: #ffffff /*{bgColorActive}*/;
  font-weight: normal /*{fwDefault}*/;
  color: #212121 /*{fcActive}*/;
  list-style: none;
  position: relative;
  top: 0;
  padding: 0;
  white-space: nowrap;
  float: left;
  border-width: 1px;
  margin: 0;
  width: 61px;
  height: 24px;
  background-color: #BB2230;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  margin-bottom: -1px;
  padding-bottom: 1px;
}

.e {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  visibility: visible;
  line-height: 20px;
  padding: 0;
  -webkit-text-size-adjust: none;
  float: right;
  height: 20px;
  margin: 1px 0 1px 1px;
  cursor: pointer;
  background-image: url("~@/assets/images/ptz.png");
  width: 20px;
  background-position: -35px -152px;
}

.f1 {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: none;
  display: inline-block;
  height: 18px;
  background-image: url("~@/assets/images/tool.png");
  width: 22px;
  background-position: -5px -33px;
}
.f2 {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: none;
  display: inline-block;
  height: 18px;
  background-image: url("~@/assets/images/tool.png");
  width: 22px;
  background-position: -33px -33px;
}
.f3 {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: none;
  display: inline-block;
  height: 18px;
  background-image: url("~@/assets/images/tool.png");
  width: 22px;
  background-position: -61px -33px;
}
.f4 {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: none;
  display: inline-block;
  height: 18px;
  background-image: url("~@/assets/images/tool.png");
  width: 22px;
  background-position: -89px -33px;
}
.f5 {
  visibility: visible;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: none;
  display: inline-block;
  width: 24px;
  height: 18px;
  background-image: url("~@/assets/images/tool.png");
  background-position: -5px -117px;
}
.f6 {
  visibility: visible;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: none;
  display: inline-block;
  width: 24px;
  height: 18px;
  background-image: url("~@/assets/images/tool.png");
  background-position: -64px -147px;
}
.f7 {
  visibility: visible;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: none;
  display: inline-block;
  width: 24px;
  height: 18px;
  background-image: url("~@/assets/images/tool.png");
  background-position: -125px -175px;
}
.f8 {
  visibility: visible;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: none;
  display: inline-block;
  width: 24px;
  height: 18px;
  background-image: url("~@/assets/images/tool.png");
  background-position: -64px -176px;
}
.f66 {
  background-image: url("~@/assets/images/tool-red.png") !important;
}
.ui-layout-toggler-east-open {
  font-family: Arial, Helvetica, sans-serif;
  -webkit-text-size-adjust: none;
  border-width: 1px 0;
  background: url("~@/assets/images/expand.png") 0 50% no-repeat;
  position: absolute;
  display: block;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  text-align: center;
  font-size: 1px;
  cursor: pointer;
  z-index: 1;
  visibility: visible;
  height: 50px;
  width: 10px;
  left: 0px;
  top: 50%;
}

</style>
